import React from 'react';
import { Carousel, Skeleton } from 'antd';
import { listenerCount } from 'process';
import { useState, useEffect } from 'react';
import { index_banner, role_list } from '../../utils/api'

import '../../styles/Banner.scss'



interface Props {
    swiperlist: any[],
    autoplay?: boolean
}

interface SwiperItem {
    id: number,
    img: string,
    link: string
}

function Banner(props: Props) {
    var { swiperlist, autoplay = false } = props;
    return (
        <div className='banner'>
            {
                swiperlist.length == 0 ?
                    <Skeleton active /> :
                    <Carousel autoplay={autoplay}>
                        {
                            swiperlist.map((item, index) => {
                                return (
                                    <div className='img' key={index}>
                                        <img src={item.img} alt="" />
                                    </div>
                                )
                            })
                        }

                    </Carousel>
            }
        </div>
    );
}

export default Banner;